<template>
	<view>
		<view class="box">
			<!-- 标题 -->
			<view class="title">
				<uni-title type="h1" :title="artcleTitle"></uni-title>
			</view>
			<!-- 用户头像、名字、微圈发布时间、收藏 -->
			<view class="top">
				<view class="left">
					<image class="avatarUrl" :src="avatarUrl"></image>
				</view>
				<view class="left">
					<view>{{nickname}}</view>
					<view class="releaseDate">{{releaseDate}}</view>
				</view>
				<view class="right">
					<button class="collection" @click="addCollection">{{shouCang}}</button>
				</view>
			</view>
			<!-- 内容 -->
			<view class="content">{{article}}</view>
			<!-- 评论内容 -->
			<view>
				<uni-list v-for="(item,index) in comments">
					<uni-list-chat :avatar-circle="true" :title="item.nickname" :avatar="item.avatarUrl"
						:note="item.content">
						<!-- 自定义右边内容 -->
						<text style="color: #BFBFBF;font-size: 13px;">{{item.createDate}}</text>
						<view class="num">{{item.fabulous}}</view>
						<uni-icons class="" type="hand-up" size="20" color="#BFBFBF"></uni-icons>
					</uni-list-chat>
				</uni-list>
				<uni-load-more status="no-more" :content-text="contentText" />
			</view>
			<!-- 相关推荐 -->
			<view>
				<uni-title type="h2" title="相关推荐" align="center" color="#1ABC9C"></uni-title>
			</view>
			<ul class="recommend">
				<li class="lis" v-for="(item,index) in actcleDatas" v-if="index<3"
					@click="getDetails(item.microcircleId,item.acticleCategroyId)">
					<view class="left">
						<image class="artcleImage" :src="item.artcleUrl"></image>
					</view>
					<view class="right lis-right">
						<h4 class="title">{{item.artcleTitle}}</h4>
						<view class="system">
							文章体系
							<text class="beTheSpeaker">
								主讲： {{item.nickname}}
							</text>
						</view>
					</view>
				</li>
			</ul>
		</view>
		<!-- 底部导航栏 -->
		<view class="bottomBtn">
			<view class="left icons">
				<uni-icons class="marginRight" type="heart" color="#666" size="30"></uni-icons>
				<uni-icons class="marginRight" type="star" color="#666" size="30"></uni-icons>
				<uni-icons class="marginRight" type="redo" color="#666" size="30"></uni-icons>
				<view>
					<text class="marginRight">点赞</text>
					<text class="marginRight">收藏</text>
					<text class="marginRight">分享</text>
				</view>
			</view>
			<view class="right pinglu">
				<uni-easyinput placeholder="请输入评论内容"></uni-easyinput>
			</view>
		</view>
	</view>
</template>

<script>
	// 通过id查询微圈信息
	import {
		getMicrocircleById
	} from '@/static/http/getData.js'
	// 评论信息
	import {
		getComment
	} from '@/static/http/getData.js'
	// 查询微圈信息
	import {
		getMicrocircle
	} from '@/static/http/getData.js'
	// 添加收藏
	import {
		addCollection
	} from '@/static/http/getData.js'
	export default {
		data() {
			return {
				// 微圈id
				microcircleId: 0,
				// 微圈信息
				microcircles: {},
				// 文章标题
				artcleTitle: '',
				// 用户头像
				avatarUrl: '',
				// 用户姓名
				nickname: '',
				// 发布时间
				releaseDate: '',
				// 文章内容
				article: '',
				// 评论内容
				comments: [],
				contentText: {
					contentnomore: "已经到底了，没有更多留言了"
				},
				// 微圈列表集合
				actcleDatas: [],
				// 微圈分类id
				acticleCategroyId: 0,
				// 收藏记录id
				collectionId: 0,
				// 登录用户id
				userId: 0,
				shouCang: '收藏'
			}
		},
		methods: {
			//微圈详情、跳转页面
			getDetails(microcircleId, acticleCategroyId) {
				uni.navigateTo({
					url: "/pages/microCircle/details?microcircleId=" + microcircleId + "&acticleCategroyId=" +
						acticleCategroyId
				})
			},
			// 收藏
			addCollection() {
				addCollection({
					// !==
					userId: 1,
					collectionType: 4,
					productId: this.microcircleId
				}).then(res => {
					if (res.statusCode == 200) {
						// 设置收藏记录id
						this.collectionId = res.data.data.collectionId;
						this.shouCang = '已收藏'
					}
				});
			}
		},
		onLoad: function(option) {
			this.microcircleId = option.microcircleId;
			this.acticleCategroyId = option.acticleCategroyId
			// // 获取登录者用户id
			// var userId = JSON.parse(uni.getStorageInfoSync('beforeUser'));
			// console.log(userId);
		},
		// 实例创建后
		created() {
			var microcircleId = this.microcircleId;
			// 查询微圈
			getMicrocircleById({
					microcircleId: microcircleId
				}).then(res => {
					if (res.statusCode == 200) {
						this.microcircles = res.data.data;
						this.artcleTitle = res.data.data.artcleTitle;
						this.avatarUrl = res.data.data.avatarUrl;
						this.nickname = res.data.data.nickname;
						this.releaseDate = res.data.data.releaseDate;
						this.article = res.data.data.article;
					}
				}),
				// 查询评论
				getComment({
					commodityId: microcircleId,
					type: 4
				}).then(res => {
					if (res.statusCode == 200) {
						this.comments = res.data.data
					}
				});
		},
		// 挂载之前
		beforeMount() {
			// 相关推荐
			var acticleCategroyId = this.acticleCategroyId;
			getMicrocircle({
				acticleCategroyId: acticleCategroyId
			}).then(res => {
				if (res.statusCode == 200) {
					this.actcleDatas = res.data.data
				}
			})
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.box {
		padding: 10px;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}

	.top {
		margin-top: 10px;
		margin-bottom: 70px;
	}

	.avatarUrl {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.releaseDate {
		color: #BCBCBC;
	}

	.collection {
		border-radius: 50%;
	}

	.collection::after {
		border: 0px
	}

	.content {
		padding: 5px;
		letter-spacing: 4px;
		font-size: 16px;
	}


	.num {
		position: absolute;
		top: 53%;
		right: 13%;
		font-size: 13px;
		color: #C8C8C8;
	}

	/deep/ .uni-list-chat__header-image {
		border-radius: 50%;
	}

	/deep/ .uni-list-chat__heade {
		border-color: #FFFFFF
	}

	ul li {
		list-style: none;
	}

	.lis {
		height: 100px;
		color: #9B9B9C;
		margin: 10px;
	}

	.artcleImage {
		width: 130px;
		height: 100px;
		border-radius: 17%;
	}

	.lis-right {
		width: calc(100% - 3% - 140px);
		margin-left: 3%;
	}

	.title {
		font-size: 20px;
		color: #000000;
		margin-top: 4%;
	}

	.system {
		font-size: 18px;
		margin-top: 7%;
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.beTheSpeaker {
		margin-left: 3%;
	}

	.recommend {
		margin-bottom: 65px;
	}

	.bottomBtn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 40px;
		line-height: 20px;
		z-index: 1010;
		border-top: 1px solid #D6D5D9;
		padding: 5px;
		background-color: #FFFFFF;
	}

	.icons {
		margin-left: 3%;
		width: 37%;
	}

	.marginRight {
		color: #C8C8C8;
		margin-right: 3%;
		margin-left: 2%;
	}

	.pinglu {
		width: 54%;
		margin-right: 6%;
	}
</style>
